<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
      姓：<input type="text" v-model="surName"/><br />
      名字: <input type="text" v-model="lastName"/><br />
      <p>姓名: {{ textName }}</p>
    </div>

    <script src="./js/vue.js"></script>

    <script>
        const vm = new Vue({
            //写数据
            data:{
                surName:"",
                lastName:"",
                textName:"",
            },
            // 监视
            watch:{
                // 检测surName输入框
                surName(surName){
                    // 输入姓的输入框 可以显示在html上
                    this.textName = this.surName + "" + this.lastName;
                },

                // 检测lastName输入框
                lastName(lastName){
                    this.textName = this.surName + "" + this.lastName;
                }
            }
        });

        vm.$mount("#app");
    </script>
  </body>
</html>
